<template>
  <div class="meeting">
    <!-- 顶部灰色导航栏 -->
    <div class="middle_1">
      <ul>
        <li><router-link to="/wedding">会议与活动</router-link></li>
        <li>
          <div class="middle_2"></div>
        </li>
        <li><router-link to="/wedding">会议</router-link></li>
        <li><router-link to="/wedding">活动</router-link></li>
        <li><router-link to="/wedding">奖励旅游</router-link></li>
        <li><router-link to="/wedding">餐饮美食</router-link></li>
        <li><router-link to="/wedding">征询方案</router-link></li>
      </ul>
    </div>
    <!-- 会议与活动图片 -->
    <div class="middle_3">
      <img src="/img/meeting/BEJ_210_original.jpg" alt="" />
      <div class="middle_4">
        <span>北京四季酒店</span>
        <p>会议与活动</p>
      </div>
    </div>
    <div class="middle_5">
      <div class="middle_5_1">
        <p>
          在毗邻朝阳公园的城中核心商务区，带您的宾客探索北京朝阳区的古韵魅力。我们有
          11
          个风格不同的会议空间供您挑选，您还可在大宴会厅举办盛大宴席。我们的专业技术团队将生动呈现您的会议演示内容。最后，邀请您的宾客到长城之上私享佳肴盛筵，为活动画上圆满的句点。
        </p>
      </div>
    </div>
    <!-- 中部灰色三框 -->
    <div class="middle_6">
      <div class="middle_6_1">
        <h3>客房与套房总数</h3>
        <p>313</p>
      </div>
      <div class="middle_6_1">
        <h3>总活动空间</h3>
        <p>2,763 平方米<br />(29,833 平方英尺)</p>
      </div>
      <div class="middle_6_1">
        <h3>套房总数</h3>
        <p>66</p>
      </div>
    </div>
    <!-- 中部数据表格 -->
    <div class="middle_7">
      <div class="middle_7_1">
        <span>查找场地</span>
        <select class="select_1" id="group" value="1">
          <option value="1">面积 (平方英尺)</option>
          <option value="2">面积 (平方米)</option>
        </select>
      </div>
      <div class="middle_7_2">
        <ul>
          <li></li>
          <li>面积 (平方米)</li>
          <li>宴会</li>
          <li>教室</li>
          <li>酒会</li>
        </ul>
      </div>
      <div class="middle_7_3">
        <span>五层</span>
      </div>
      <div class="middle_7_4" v-for="(room, i) in rooms" :key="i">
        <ul>
          <li>
            <div class="middle_7_5">{{ room.name }}</div>
          </li>
          <li>{{ room.area }}</li>
          <li>{{ room.banquet }}</li>
          <li>{{ room.classroom }}</li>
          <li>{{ room.party }}</li>
        </ul>
      </div>
      <div class="middle_7_3">
        <span>三层</span>
      </div>
      <div class="middle_7_4" v-for="(room, i) in rooms1" :key="i">
        <ul>
          <li>
            <div class="middle_7_5">{{ room.name }}</div>
          </li>
          <li>{{ room.area }}</li>
          <li>{{ room.banquet }}</li>
          <li>{{ room.classroom }}</li>
          <li>{{ room.party }}</li>
        </ul>
      </div>
    </div>
    <div class="middle_8">
      <span>您在北京的四季体验 #FSEVENTS</span>
      <div class="middle_8_1"></div>
      <p>
        欢迎查看四季酒店近期的活动，然后标记 @FourSeasons 并使用话题标签
        #FSEvents 分享您在北京的体验。
      </p>
    </div>
    <!-- 底部图片 -->
    <div class="middle_9">
      <div class="middle_9_1">
        <img src="/img/meeting/BEJ_UGC_x.yang_hello.jpg" alt="" />
        <p>@X.YANG_HELLO</p>
      </div>
      <div class="middle_9_2">
        <img src="/img/meeting/BEJ_UGC_kerr_wong18.jpg" alt="" />
        <p>@KERR_WONG18</p>
      </div>
    </div>
    <div class="footer_9_3">
      <div class="middle_10">
        <div class="middle_11">
          <span>我们经验丰富的团队可帮助您规划梦寐以求的活动。</span>
          <div>
            <router-link to="/meeting">+86 10 5695 8888</router-link>
          </div>
        </div>
        <div class="middle_12">
          <router-link to="/meeting">联系我们</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.middle_1 {
  width: 100%;
  height: 55px;
  background-color: lightgrey;
}
.middle_2 {
  width: 0px;
  height: 30px;
  border: 1px solid gray;
  margin-top: 12px;
}
.middle_1 ul {
  list-style: none;
}
.middle_1 ul > li {
  float: left;
  line-height: 55px;
  margin-right: 30px;
  font-size: 0.5rem;
  letter-spacing: 2px;
  font-weight: bold;
}
.middle_1 ul > li > a {
  color: #333;
}
.middle_1 ul > li > a:hover {
  color: black;
  text-decoration: underline;
  transition: 0.4s;
}
.middle_1 ul > li:first-child {
  margin-left: 180px;
}
.middle_3 {
  width: 100%;
  height: 550px;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.middle_3 img {
  width: 100%;
}
.middle_4 {
  width: 500px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 10%);
}
.middle_4 span {
  font-size: 1.1rem;
  color: #fff;
  font-style: italic;
  font-weight: 500;
}
.middle_4 p {
  color: #fff;
  font-size: 4.5rem;
  letter-spacing: 15px;
  margin-left: 15px;
  margin-top: 30px;
}
.middle_5 {
  width: 100%;
  height: 250px;
  display: flex;
}
.middle_5_1 {
  width: 50%;
  height: 100%;
  margin: 0 auto;
  margin-top: 65px;
}
.middle_5_1 p {
  font-size: 1.4rem;
  line-height: 35px;
}
.middle_6 {
  width: 80%;
  height: 150px;
  border: 1px solid lightgray;
  margin: 0 auto;
  display: flex;
  margin-bottom: 60px;
}
.middle_6_1 {
  height: 100%;
  width: 33.3%;
  border: 1px solid lightgray;
  text-align: center;
}
.middle_6_1 h3 {
  font-size: 0.75rem;
  letter-spacing: 2px;
  font-weight: bold;
  margin-top: 50px;
}
.middle_6_1 p {
  font-size: 1.12rem;
  font-weight: 400;
  margin-top: 20px;
}
.middle_7 {
  width: 80%;
  height: 1200px;
  margin: 0 auto;
}
.middle_7_1 {
  width: 100%;
  height: 50px;
}
.middle_7_1 span {
  line-height: 50px;
  font-size: 1.5rem;
  letter-spacing: 3px;
  font-weight: 200;
}
.select_1 {
  float: right;
  border: 2px solid black;
  border-radius: 5px;
  padding: 12px;
  font-size: 0.6rem;
  letter-spacing: 2px;
  font-weight: bold;
}
.middle_7_2 {
  width: 100%;
  height: 30px;
  margin-top: 10px;
}
.middle_7_2 ul > li {
  float: left;
  width: 14%;
  text-align: right;
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 1px;
}
.middle_7_2 ul > li:first-child {
  width: 40%;
  height: 20px;
}
.middle_7_3 {
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}
.middle_7_3 span {
  font-size: 0.6rem;
  font-weight: bold;
  letter-spacing: 3px;
  line-height: 60px;
  margin-left: 20px;
}
.middle_7_4 {
  width: 100%;
  height: 40px;
  margin-top: 10px;
}
.middle_7_4 ul > li {
  margin-top: 10px;
  float: left;
  width: 14%;
  text-align: right;
  font-style: italic;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 1px;
}
.middle_7_4 ul > li:first-child {
  width: 40%;
  height: 20px;
  text-align: left;
  font-style: initial;
  font-size: 1.1rem;
  margin-top: 10px;
  font-weight: 500;
}
.middle_7_5 {
  width: 100%;
  height: 100%;
  padding-bottom: 5px;
}
.middle_8 {
  width: 80%;
  height: 200px;
  clear: both;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.middle_8 span {
  display: block;
  font-size: 1.5rem;
  letter-spacing: 5px;
  font-weight: 500;
  margin-top: 100px;
}
.middle_8_1 {
  width: 40px;
  height: 1px;
  border-bottom: 2px solid black;
  margin: 0 auto;
  margin-top: 10px;
}
.middle_8 p {
  display: block;
  font-size: 1.1rem;
  margin-top: 15px;
  font-weight: bold;
}
.middle_9 {
  width: 78%;
  height: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}
.middle_9_1,.middle_9_2 {
  width: 45%;
}
.middle_9 img {
  width: 500px;
  height: 500px;
}
.middle_9 p {
  margin: 20px 0 60px 0;
  font-size: 0.8rem;
  letter-spacing: 2px;
}
.footer_9_3 {
  width: 100%;
  height: 200px;
  background-color: black;
}
.middle_10 {
  width: 65%;
  height: 80px;
  background-color: white;
  margin: auto;
  position: relative;
  margin-top: 100px;
  transform: translateY(90px);
}
.middle_11 {
  width: 75%;
  height: 100%;
  line-height: 80px;
  margin-left: 70px;
}
.middle_11 span {
  color: black;
  font-style: italic;
  font-size: 1.1rem;
}
.middle_11 > div {
  position: absolute;
  top: 0px;
  right: 200px;
}
.middle_11 > div > a {
  text-decoration: underline;
  color: black;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 1px;
}
.middle_11 > div > a:hover {
  color: gray;
  transition: 0.4s;
}
.middle_12 {
  width: 130px;
  height: 30px;
  background-color: black;
  position: absolute;
  right: 35px;
  bottom: 25px;
  text-align: center;
  border-radius: 1px;
  border: 1px solid black;
}
.middle_12:hover {
  background-color: white;
  transition: 0.4s;
}
.middle_12 a:hover {
  color: black;
  transition: 0.4s;
}
.middle_12 a {
  display: block;
  width: 130px;
  height: 30px;
  color: white;
  line-height: 30px;
  font-size: 0.7rem;
  letter-spacing: 3px;
  font-weight: bold;
}
</style>
<script>
export default {
  data() {
    return {
      rooms: [
        {
          name: "大宴会厅",
          area: 988,
          banquet: 540,
          classroom: 510,
          party: 760,
        },
        {
          name: "大宴会厅 I",
          area: 338,
          banquet: 180,
          classroom: 162,
          party: 260,
        },
        {
          name: "大宴会厅 II",
          area: 312,
          banquet: 180,
          classroom: 162,
          party: 260,
        },
        {
          name: "大宴会厅 III",
          area: 338,
          banquet: 180,
          classroom: 162,
          party: 260,
        },
        {
          name: "大宴会厅 I 和 II 或 II 和 III",
          area: 650,
          banquet: 360,
          classroom: 330,
          party: 520,
        },
        {
          name: "大宴会厅迎宾区",
          area: 304,
          banquet: "-",
          classroom: "-",
          party: "-",
        },
        { name: "紫禁厅 I", area: 84, banquet: 40, classroom: 30, party: 40 },
        { name: "紫禁厅 II", area: 84, banquet: 40, classroom: 36, party: 40 },
        { name: "紫禁厅 III", area: 96, banquet: 40, classroom: 36, party: 40 },
        { name: "紫禁厅 IV", area: 96, banquet: 30, classroom: 30, party: 40 },
        { name: "紫禁厅 V", area: 63, banquet: 10, classroom: 12, party: 20 },
        {
          name: "紫禁厅 II 和 III",
          area: 180,
          banquet: 80,
          classroom: 96,
          party: 120,
        },
        {
          name: "紫禁厅迎宾区",
          area: 145,
          banquet: "-",
          classroom: "-",
          party: "-",
        },
      ],
      rooms1: [
        { name: "北京厅", area: 255, banquet: 120, classroom: 162, party: 180 },
        {
          name: "北京厅 I",
          area: 127.5,
          banquet: 60,
          classroom: 72,
          party: 90,
        },
        {
          name: "北京厅 II",
          area: 127.5,
          banquet: 60,
          classroom: 72,
          party: 90,
        },
        {
          name: "北京厅迎宾区",
          area: 153,
          banquet: "-",
          classroom: "-",
          party: "-",
        },
        { name: "四季厅 I", area: 92, banquet: 40, classroom: 30, party: 50 },
        { name: "四季厅 II", area: 92, banquet: 40, classroom: 30, party: 50 },
        { name: "四季厅 III", area: 92, banquet: 30, classroom: 30, party: 45 },
        { name: "Tang IV", area: 59, banquet: 20, classroom: 20, party: 20 },
        {
          name: "四季厅 I和II",
          area: 185,
          banquet: 80,
          classroom: 45,
          party: 80,
        },
        {
          name: "四季厅 II和III",
          area: 185,
          banquet: 70,
          classroom: 45,
          party: 70,
        },
        {
          name: "四季厅 I、II 和 III",
          area: 275,
          banquet: 110,
          classroom: 63,
          party: 110,
        },
        {
          name: "四季厅迎宾区",
          area: 165,
          banquet: "-",
          classroom: "-",
          party: "-",
        },
      ],
    };
  },
};
</script>
＿
